<template>

  <div>
    <tr>
      <span>歌曲id:    </span>
      <span>{{musicId}}</span>
    </tr>
    <tr>
      <span>歌曲名:    </span>
      <span>{{musicName}}</span>
    </tr>

    <tr>
      <span>歌曲专辑：  </span>
      <span>{{albumName}}</span>
    </tr>

    <tr>
      <span>歌曲类型：   </span>
      <span>{{musicTypeName}}</span>
    </tr>
    <tr>
      <span>语言：   </span>
      <span>{{languageName}}</span>
    </tr>
    <tr>
      <span>下载量：   </span>
      <span>{{downloadQuantity}}</span>
    </tr>
    <tr>
      <span>播放量：   </span>
      <span>{{visitQuantity}}</span>
    </tr>
    <tr>
      <span>收藏量：   </span>
      <span>{{collectQuantity}}</span>
    </tr>
    <tr>
      <span>发布时间：   </span>
      <span>{{publishTime}}</span>
    </tr>
    <tr>
      <span>歌曲描述：   </span>
      <span>{{musicDescription}}</span>
    </tr>

    <tr>歌词:</tr>
    <span>{{lyric}}</span>

    <tr>
      <span class="grid-content bg-purple">歌曲mv:</span>
      <div class="test_two_box">

        <video controls  :src="musicUrl"/>

      </div>
    </tr>
    <tr><el-button type="success" @click="back">返回</el-button></tr>
  </div>

</template>

<script>
  import axios from "axios"
  export default {
    data(){
      return{
        musicId:'',
        musicName:'',
        lyric:'',
        musicUrl:'',
        albumName:'',
        collectQuantity:'',
        downloadQuantity:'',
        publishTime:'',
        visitQuantity:'',
        musicDescription:'',
        musicTypeName:'',
        languageName:''

      }
    },
    mounted() {
      var id=this.$route.params.id
      this.findAllMusicById(id);
      this.initVideo();
    },
    methods:{
      findAllMusicById(id){
        axios.post("http://127.0.0.1:8200/fancy-music-category/category/selectMusicById/"+id).then(res=>{
          console.log(res.data)

          this.musicId=res.data.musicId;
          this.musicName=res.data.musicName;
          this.lyric=res.data.lyric;
          this.musicUrl=res.data.musicUrl;
          this.albumName=res.data.albumName;
          this.collectQuantity=res.data.collectQuantity;
          this.downloadQuantity=res.data.downloadQuantity;
          this.publishTime=res.data.publishTime;
          this.visitQuantity=res.data.visitQuantity;
          this.musicDescription=res.data.musicDescription;
          this.musicTypeName=res.data.musicTypeName;
          this.languageName=res.data.languageName;
          // alert(this.musicUrl)
        })
      },
      initVideo() {
        //初始化视频方法
        // myVideo,
          let myPlayer = this.$video({
          //确定播放器是否具有用户可以与之交互的控件。没有控件，启动视频播放的唯一方法是使用autoplay属性或通过Player API。
          controls: true,
          //自动播放属性,muted:静音播放
          autoplay: "muted",
          //建议浏览器是否应在<video>加载元素后立即开始下载视频数据。
          preload: "auto",
          //设置视频播放器的显示宽度（以像素为单位）
          width: "800px",
          //设置视频播放器的显示高度（以像素为单位）
          height: "400px"
        });
      },
      back(){
        this.$router.push("/MusicList")
      }
    }
  }
</script>

<style scoped>

</style>
